<template>  
  <div id="distribution">
    <article class="mapTop">
      <span class="flt iconfont icon-fanhui" @click="back"></span>
      <div class="title">终端分布</div>
      <span class="frt iconfont icon-shuaxin"
      :class="{animation: loading}"
       @click="refresh"></span>
    </article>
    <article class="mapBox">
      <baidu-map ref="map" @showItem="showItem" @refreshLoading="refreshLoading"></baidu-map>
    </article>
    <article class="messageBox" 
    :style="{height: `calc(${itemMsgHeight ? 160 : 120}px + ${itemMsgHeight*40}px)`}" 
      :class="itemMessageIsShow ? 'itemActive' : ''">
      <item-message :itemMessageData="itemMessageData" @detailsNum="detailsNum"></item-message>
    </article>
  </div>
</template>

<script>
import baiduMap from './baiduMap';
import itemMessage from "./itemMessage";
export default {
  name: 'distribution',
  components: {
    baiduMap,
    itemMessage
  },
  data () {
    return {
      itemMessageIsShow: false,
      itemMessageData: {},
      itemMsgHeight: 0,
      loading: true,
    }
  },
  methods: {
    showItem (data) {
      this.itemMessageData = data;
      this.itemMessageIsShow = true;
      this.itemMsgHeight = 0;
    },
    detailsNum (data) {
      if(Number(this.itemMessageData.count02) > 0){
        this.itemMsgHeight = data;
      }else{//关闭
        this.itemMessageIsShow = false;
      }
    },
    refresh () {
      this.$refs.map.getMapList();
    },
    refreshLoading (data) {
      this.loading = data;
    },
    back () {
      window.location = "back.html"
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  #distribution{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .mapTop{
      width: 100%;
      height: 50px;
      color: #068efb;
      font-size: 20px;
      border-bottom: 1px solid #dedede;
      .iconfont{
        font-size: 24px;
        width: 50px;
        height: 100%;
        line-height: 50px;
        text-align: center;
      }
      .title{
        width: calc(100% - 100px);
        height: 100%;
        text-align: center;
        line-height: 50px;
        float: left;
        color: #333;
      }
      .animation {
        animation: refreshAnimation 2.5s linear infinite;
      }
    }
    .mapBox{
      width: 100%;
      height: calc(100% - 51px);
    }
    .messageBox{
      width: 100%;
      max-height: calc(100% - 51px);
      position: absolute;
      top: 100%;
      left: 0;
      background: #fff;
      transition: all 0.3s;
      transform: translate(0, 0);
    }
    .itemActive{
      transform: translate(0, -100%);
    }
  }
  @keyframes refreshAnimation{
    0%{
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes refreshAnimation{
    0%{
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>